<template>
	<view>
		<swiper class="grace-swiper swiper1" 
		autoplay="true" indicator-dots 
		indicator-color="rgba(255, 255, 255, 1)" 
		indicator-active-color="#3688FF" 
		style="height:300upx" 
		interval="3000">
			<swiper-item>
				<view class="grace-img-in">
					<image src='https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/1.png'></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="grace-img-in">
					<image src='https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/2.png'></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="grace-img-in">
					<image src='https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/3.png'></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="grace-space-between" style="padding:30rpx 2%;">
			<view class="grace-product-title">{{product.name}}</view>
			<button class="grace-product-share" @tap="share"><text class="grace-icons icon-share3"></text></button>
		</view>
		<view class="line"></view>
		<view class="grace-product-price">
			￥{{product.price}}<text>￥{{product.priceMarket}}</text>
		</view>
		<view class="grace-product-desc">
			<text>运费 ￥0.00</text>
			<text>已售 21008 件</text>
			<text>浏览 36万次</text>
		</view>
		<view class="line"></view>
		<view class="grace-product-menu">
			<view :class="[active == 1 ? 'active' : '']" @tap="showInfo">商品详情</view>
			<view :class="[active == 2 ? 'active' : '']" @tap="showComments">商品评论</view>
		</view>
		<!-- 详情 -->
		<view class="grace-product-info" :hidden="active == 2">
			<image src="https://img30.360buyimg.com/sku/jfs/t21838/18/2275707529/311540/cba1d04c/5b4f155fNac3aa2f0.jpg" mode="widthFix"></image>
			<image src="https://img30.360buyimg.com/sku/jfs/t22021/327/2281785192/48707/57806074/5b4f1579Nae7adb49.jpg" mode="widthFix"></image>
			<image src="https://img30.360buyimg.com/sku/jfs/t21682/256/2344553276/204456/cf7a2ddb/5b4ffbbfN48c54307.jpg" mode="widthFix"></image>
		</view>
		<!-- 评论 -->
		<view class="grace-product-info" :hidden="active == 1">
			<view class="grace-comments">
				<view class="items">
					<view class="face">
						<image src="https://graceui.oss-cn-beijing.aliyuncs.com/faces/1.png" mode="widthFix"></image>
					</view>
					<view class="body">
						<view class="header">
							<text>刘美丽</text><text class="grace-icons icon-zan"></text>
						</view>
						<view class="info">
							<text>08/10 08:12</text><text>102</text>
						</view>
						<view class="content">很好的手机，赞了</view>
					</view>
				</view>
				<view class="items">
					<view class="face">
						<image src="https://graceui.oss-cn-beijing.aliyuncs.com/faces/2.png" mode="widthFix"></image>
					</view>
					<view class="body">
						<view class="header">
							<text>某用户</text>
							<text></text>
						</view>
						<view class="imgs">
							<view><image src="https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/4.png" mode="widthFix"></image></view>
							<view><image src="https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/3.png" mode="widthFix"></image></view>
							<view><image src="https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/1.png" mode="widthFix"></image></view>
							<view><image src="https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/1.png" mode="widthFix"></image></view>
							<view><image src="https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/4.png" mode="widthFix"></image></view>
							<view><image src="https://graceui.oss-cn-beijing.aliyuncs.com/scollimgs/3.png" mode="widthFix"></image></view>
						</view>
						<view class="content">很不错!</view>
						<view class="info">
							<text>08/10 08:12</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height:60px;"></view>
		<!-- 底部 -->
		<view class="grace-footer">
			<view class="icon-btn" @tap="gohome">
				<view class="icon grace-icons icon-home"></view>
				<view class="text">首页</view>
			</view>
			<view class="icon-btn">
				<view class="icon grace-icons icon-shoucang active"></view>
				<view class="text active">收藏</view>
			</view>
			<button type="warn" style="background:#FF0036;" @click="buyNow">立即购买</button>
			<button type="warn" style="background:#F37B1D;" @click="buyNow">加入购物车</button>
		</view>
		<!-- 商品属性  start -->
		<view class="grace-shade grace-shade-black" v-if="attrIsShow">
			<view class="grace-product-attr" v-if="attrIsShow">
				<form @submit="attrSubmit" class="grace-form">
					<!-- 关闭按钮  -->
					<view class="grace-product-attr-close" @click="closeAttr">
						<text class="grace-icons icon-close2"></text>
					</view>
					<!-- 头部商品信息 -->
					<view class="grace-product-attr-info">
						<image src="https://img13.360buyimg.com/n7/jfs/t1/9085/2/12381/146200/5c371c5bE08328383/4f4ba51aed682207.jpg" mode="widthFix"></image>
						<view class="title">
							{{product.name}}
							<text>\n库存 : 1999件</text>
						</view>
					</view>
					<!-- 属性列表区 -->
					<view style="height:calc(100% - 155px); overflow-y:auto;">
						<view class="grace-product-attr-list">
							<view class="title">颜色</view>
							<view class="grace-select-tags">
								<radio-group @change="colorChange" name="color">
									<label v-for="(item, index) in colorTips" :key="index" :class="[item.checked ? 'grace-checked' : '']">
										<radio :value="item.value" :checked="item.checked"></radio> {{item.name}}
									</label>
								</radio-group>
							</view>
						</view>
						<view class="grace-product-attr-list">
							<view class="title">套餐类型</view>
							<view class="grace-select-tags">
								<radio-group @change="typeChange" name="type">
									<label v-for="(item, index) in typeTips" :key="index" :class="[item.checked ? 'grace-checked' : '']">
										<radio :value="item.value" :checked="item.checked"></radio> {{item.name}}
									</label>
								</radio-group>
							</view>
						</view>
						<view class="grace-items" style="margin-top:8px;">
							<view class="grace-label">购买数量</view>
							<!-- input 用于记录购买数量隐藏形式并参与表单提交 -->
							<input type="number" name="buynum" :value="buyNum" style="display:none;" />
							<graceNumberBox :value="buyNum" v-on:change="buyNumChange"></graceNumberBox>
						</view>
					</view>
					<view class="grace-product-attr-btn">
						<button type="warn" formType="submit">确定</button>
					</view>
				</form>
			</view>
		</view>
		<!-- 商品属性 end -->
	</view>
</template>
<script>
	import graceNumberBox from "../../graceUI/components/graceNumberBox.vue";
	export default {
		data() {
			return {
				product : {
					name: "小米 MIX3 一面科技 一面艺术 ( 磁动力滑盖全面屏 | 故宫特别版 )",
					logo : "../../static/logo.png",
					imgs : [
						{imgUrl : this.staticUrl + 'banners/1.png'},
						{imgUrl : this.staticUrl + 'banners/2.png'},
						{imgUrl : this.staticUrl + 'banners/3.png'}
					],
					price : 3188,
					priceMarket : 3200
				},
				active:1,
				//属性
				attrIsShow : false, //属性界面是否隐藏
				attrData : null, // attrdata用于记录用户选择的属性
				colorTips : [
					{ name: '灰色', value: '灰色', checked: false },
					{ name: '银色', value: '银色', checked: false}
				],
				typeTips : [
					{ name: '套餐一', value: '套餐一', checked: false },
					{ name: '套餐二', value: '套餐二', checked: false},
					{ name: '套餐三', value: '套餐三', checked: false}
				],
				buyNum : 1
			};
		},
		onLoad :function(){
			// 设置导航栏标题
			uni.setNavigationBarTitle({
				title:this.product.name
			});
		},
		methods:{
			share: function () {
				uni.showToast({
					title: '请自行完善分享代码',
					icon: "none"
				})
			},
			showComments : function(){
				this.active = 2;
			},
			showInfo: function () {
				this.active = 1;
			},
			home : function(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			buyNow : function(){
				//打开属性视图
				this.attrIsShow = true;
			},
			//属性
			attrSubmit : function(e){
				//记录用户选择的属性
				this.attrData = e.detail.value;
				console.log(this.attrData);
				//关闭
				this.attrIsShow = false;
				//后续操作
				uni.showToast({
					title:"属性已经收集,请自行完善下一步代码",
					icon:"none"
				})
			},
			closeAttr : function(){
				this.attrIsShow = false;
			},
			colorChange: function (e) {
				var checkVal = e.detail.value;
				for (var i = 0; i < this.colorTips.length; i++) {
					if (checkVal.indexOf(this.colorTips[i].value + '') != -1) {
						this.colorTips[i].checked = true;
					} else {
						this.colorTips[i].checked = false;
					}
				}
				this.colorTips = this.colorTips;
			},
			typeChange: function (e) {
				var checkVal = e.detail.value;
				for (var i = 0; i < this.typeTips.length; i++) {
					if (checkVal.indexOf(this.typeTips[i].value + '') != -1) {
						this.typeTips[i].checked = true;
					} else {
						this.typeTips[i].checked = false;
					}
				}
				this.typeTips = this.typeTips;
			},
			buyNumChange : function(e){
				this.buyNum = e[0];
			},
			gohome : function(){
				uni.switchTab({
					url:'../index/index'
				})
			}
		},
		components:{
			graceNumberBox
		}
	}
</script>
<style>
.line{background:#F2F3F4; height:8px; width:100%;}
/* 商品展示 */
.grace-product-title{background:#FFF; font-weight:600; line-height:1.8; font-size:32upx;}
.grace-product-share{width:40px; padding:0; text-align:center; background:none; border:none; box-shadow:none; height:40px; font-size:24px; color:#FF7900; line-height:40px; flex-shrink:0; margin-left:12px;}
.grace-product-share:after{width:0; height:0;}
.grace-product-price{background:#FFF; padding:20upx 2%; padding-bottom:5upx; color:#FF7900; line-height:30px; font-size:24px; font-weight:600; margin-top:5px;}
.grace-product-price text{color:#999; font-size:16px; text-decoration:line-through; line-height:30px; margin-left:8px;}
.grace-product-desc{background:#FFF; padding:8upx 2%; padding-bottom:20upx; font-size:24upx; color:#666666; line-height:1.8; justify-content:space-between; display:flex; flex-wrap:nowrap;}
.grace-product-menu{padding:0upx 2%; padding-top:10px; background:#FFF; margin-top:5px; display:flex; flex-wrap:nowrap;}
.grace-product-menu view{width:40%; margin:0 5%; line-height:80upx; border-bottom:6upx solid #FFFFFF; font-size:30upx; text-align:center;}
.grace-product-menu .active{border-color:#FF7900; font-weight:600; color:#FF7900;}
.grace-product-info{background:#FFF; padding:30upx 2%;}
.grace-product-info image{width:100%;}
.grace-product-btn{width:30%; height:90upx; line-height:90upx; font-size:30upx; color:#FFF; text-align:center; background:#FF7900;}
.grace-product-attr{width:94%; padding:5px 3%; height:80%; position:absolute; left:0; bottom:0; border-top-left-radius:5px; border-top-right-radius:5px; background:#FFF;}
.grace-product-attr-info{overflow:hidden; display:flex; justify-content:space-between;  border-bottom:1px solid #F1F1F3; padding-bottom:12px;}
.grace-product-attr-info image{width:60px; height:auto; margin-right:10px; flex-shrink:0;}
.grace-product-attr-info .title{width:100%;}
.grace-product-attr-info .title text{font-size:10px; color:#666666;}
.grace-product-attr-list{padding-top:15px; border-bottom:1px solid #F1F1F3;}
.grace-product-attr-list .title{font-weight:700;}
.grace-product-attr-btn{width:94%; padding:5px 3%; position:fixed; z-index:10; bottom:0; left:0;}
.grace-product-attr-btn button{height:40px; line-height:40px;}
.grace-product-attr-close{padding:5px 0; line-height:25px; text-align:right;}
.grace-product-attr-close text{font-size:24px; color:#666666;}
</style>